<template>
	<!-- 地址 -->
	<view class="shipping">
		<view class="linehh" :style="'height:'+xiantiaoHeight+'px;top:'+xiantiaoTop+'px;left:'+xiantiaoLeft+'px'"></view>
		<view class="ul" v-for="(item,index) in shiplist" :key="index">
			<view class="li">
				<view class="time">
					<!-- <text class="timeday">{{item.time.split(' ')[0].slice(5,)}}</text> -->
					<!-- <text class="timeh">{{item.time.split(' ')[1].slice(0,-3)}}</text> -->
					<text class="timeday" :class="{active:index==0}">{{item.status =='在途'?'':item.status}}</text>
				</view>
				<view class="mmmm">

					<view class="yuan "
						:class="{act:index==0,first:index==0,end:index==shiplist.length-1,small:item.status =='在途'}">

					</view>
				</view>

				<view class="desc" :class="{black:index==0}">
					<text>{{item.context}}</text>
					<view style="font-size: 24rpx;">{{item.time}}</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-if="!shiplist.length">
			<van-empty description="暂无物流信息" />
		</view>
	</view>
</template>


<script>
	import {
		getLogistics
	} from '../../api/api';
	export default {
		data() {
			return {
				xiantiaoHeight: 0,
				xiantiaoLeft: 0,
				xiantiaoTop: 0,
				order_id: 0,
				shiplist: []
			}
		},
		onLoad(options) {
			this.order_id = options.id;
			this.getData();
			
		},
		methods: {
			getData() {
				uni.showLoading({
					title:'加载中'
				})
				getLogistics({
					order_id: this.order_id
				}).then(res => {
					if(res.code == 1){
						uni.hideLoading()
						this.shiplist = res.data;
						var that = this;
						setTimeout(()=> {
							that.getHeight();
						}, 0)
					}
				})
			},
			getHeight() {
				const query = uni.createSelectorQuery();
				query.select('.first').boundingClientRect()
				query.select('.end').boundingClientRect()
				var that = this;
				query.exec(function(res) {

					var xiantiaoHeight = 0;
					if (res[1] !== null) {
						xiantiaoHeight = (res[1].top - res[0].top);
					}

					that.xiantiaoHeight = xiantiaoHeight;
					that.xiantiaoLeft = res[0].left + 4;
					that.xiantiaoTop = res[0].top;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(246, 246, 246, 1);
		padding-bottom: 120upx;
		font-family: PingFang SC;
		letter-spacing: 0.30000001192092896px;
	}

	// 物流列表
	.shipping {
		width: 94%;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 30upx;
		margin-top: 20upx;
		border-radius: 10upx;
		padding-bottom: 120rpx;
		.linehh {
			position: absolute;
			width: 2upx;
			border-left: 2upx dotted rgba(176, 177, 183, 1);
		}

		.ul {
			.li {
				width: 100%;
				display: flex;
				height: auto;
				margin-top: 2upx;
				// .time:before {
				// 	/* 流程点的样式 */
				// 	content: '';
				// 	border: 3upx solid $base-color;
				// 	background-color: $base-color;
				// 	display: inline-block;
				// 	width: 16upx;
				// 	height: 16upx;
				// 	border-radius: 10upx;
				// 	margin-left: 120upx;
				// 	margin-right: 0upx
				// }

				.time {

					width: 16%;
					padding: 20upx 0upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(176, 177, 183, 1);


					.timeday {
						font-size: 32upx;

						&.active {
							color: #333;
						}
					}

					.timeh {
						font-size: 24upx;
					}

				}

				.mmmm {

					position: relative;
					width: 10%;

					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.yuan {
						position: absolute;
						left: 20upx;
						width: 20rpx;
						height: 20rpx;
						background: #dedede;
						border-radius: 50%;
						// border: 3rpx solid #f2f2f2;

						&.act {
							background-color: #FD2E6F;
						}

						&.small {
							width: 15rpx;
							height: 15rpx;
							left: 22rpx;
						}
					}

				}

				.desc {
					width: 74%;
					padding: 20upx 0upx;
					margin-left: 20upx;
					font-size: 28upx;
					font-weight: 500;
					color: rgba(176, 177, 183, 1);

					&.black {
						color: rgba(34, 36, 49, 1);
					}

					text {}
				}
			}
		}
	}
</style>